<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现待办任务列表应用</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="Application">
        <!-- 输入框元素，用来新建待办任务 -->
        <form @submit.prevent="addTask">
            <span>新建任务</span>
            <input v-model="taskText" placeholder="请输入任务...">
            <button>添加</button>
        </form>
        <!-- 有序序列，使用v-for来构建 -->
        <ol>
            <li v-for="(item,index) in todos">{{item}}
                <button @click="remove(index)">删除任务</button>
                 <hr/>
            </li>
        </ol>
    </div>
</body>
<script>
    const App={
        data(){
            return {
            //待办任务列表数据
            todos:[],
            //当前输入的待办任务
            taskText:""
            }
        },
        methods: {
            //添加一条待办任务
            addTask(){
                //判断输入框是否为空
                if(this.addTask.length==0){
                    alert("请输入任务")
                    return
                }
                this.todos.push(this.taskText)
                this.taskText=""
            },
            //删除一条待办任务
            remove(index){
                this.todos.splice(index,1)
            }
        }
    }
    Vue.createApp(App).mount("#Application")
</script>
</html>